$(() => {
    // 1、获取文章列表数据
    let data = { page: 1, perpage: 10 }
    function getList() {
        // 封装起来更简洁
        myAjax('get', '/admin/article/query', data, (res) => {
            // console.log(res);
            let htmlStr = template('article', res)
            $('tbody').html(htmlStr)
            // 渲染分页,获取数据的时候就要渲染
            renderPager(res.data.totalCount)
        })
        // $.ajax({
        //     type: 'get',
        //     url: 'http://localhost:8080/api/v1/admin/article/query',
        //     data: {
        //         // 每页显示条数，为空默认每页6条
        //         perpage: 10
        //     },

        //     success: (res) => {
        //         console.log(res);
        //     }
        // })
    }
    getList()

    // 2、搜索文章
    $('#btnSearch').on('click', function () {
        // 获取输入框的关键词
        let key = $('#aname').val().trim()
        // 获取文章类型id
        let catagoryId = $('#selCategory').val()
        // 获取文章的状态
        let selStatus = $('#selStatus').val()
        data = {
            key: key,
            type: catagoryId,
            state: selStatus,
            perpage: 10
        }
        getList()
        // 清空输入框的关键词
        $('#aname').val('')
    })

    // 3、动态渲染类别列表
    function getCategoryList() {
        myAjax('get', '/admin/category/list', {}, (res) => {
            // console.log(res);
            let htmlStr = template('category', res)
            $('#selCategory').html(htmlStr)
        })
    }
    getCategoryList()

    // 4、删除文章
    // 事件委托,根据id去删除
    $('tbody').on('click', '.del', function () {

        // 二次确认是否删除
        layer.confirm('是否删除?', { icon: 3, title: '温馨提示' }, (index) => {
            //获取id 因为this的指向，所以改为箭头函数
            let id = $(this).data('id')
            // console.log(id);
            myAjax('post', '/admin/article/delete', { id }, (res) => {
                //   console.log(res);
                // 重新渲染列表数据
                getList()

            })
            // 自动关闭弹窗
            layer.close(index);
        });
    })

    // 5、分页
    const renderPager = (count) => {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'pager',//注意，这里的 test1 是 ID，不用加 # 号
                count: count,//数据总数，从服务端得到
                // 页容量
                limit: data.perpage,
                // 初始化页面的高亮
                curr: data.page,
                // jump:触发时机：初加载分页组件和点击切换时
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    // console.log(obj);
                    //首次不执行，切换时才执行
                    if (!first) {
                        // console.log('要执行的代码在这里');
                        // 修改请求参数的页码为当前分页的页码
                        data.page = obj.curr
                        // 根据新的页码获取列表
                        getList()
                    }
                }
            });
        });
    }
})